<template>
    <div class="addUser">
        <el-dialog
                title="添加用户"
                :visible.sync="isShowDialog"
                 width="500px"
                :close-on-click-modal="isModelClose"
                :style="dialogStyle"
                :before-close="close">
                <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="邮箱" prop="email">
                        <el-input  v-model="email"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" prop="email">
                        <el-input  v-model="username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password"  v-model="password"></el-input>
                    </el-form-item>
                </el-form>
               <span slot="footer" class="dialog-footer">
                    <el-button type="primary"  @click="confirm()">确定</el-button>
                    <el-button @click="close">取消</el-button>
               </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
    import {Component, Emit, Vue,Prop} from 'vue-property-decorator';
    import $ from "jquery";
    import SpuBasicInfo from "@/components/product-manager/dialog/spu-basic-info.vue";
    import SkuInfo from "@/components/product-manager/dialog/sku-info.vue";
    import ParamsInfo from "@/components/product-manager/dialog/params-info.vue";
    import {namespace} from "vuex-class";
    import AdminApiActions from "@/components/api/admin-api-actions";
    const goodStore=namespace("goods");
    @Component({
        components:{
            SpuBasicInfo,
            SkuInfo,
            ParamsInfo
        }
    })
    export default class Index extends Vue {
        @goodStore.Mutation updateGoodState;
        @Prop() params;
        isModelClose=true;
        public dialogStyle:any={};
        public isShowDialog:any=true;
        public email:any="";
        public password:any="";
        public username:any="";
        public ruleForm:any={};
        public centerDialog(){
            this.$nextTick(()=>{
                let dialogHeight=$(".addUser .el-dialog").height();
                let windowHeight=$(window).height();
                let dh=windowHeight/2-dialogHeight/2+20;
                this.dialogStyle={
                    top:dh+"px"
                };
            });
        }
        @Emit("close")
        public close(){
            this.isShowDialog=false;
        }
        async created() {
            this.centerDialog();
        }
        //组装Sku，Spu,规格参数信息
        public async confirm(){
            await AdminApiActions.addUser({
                 email:this.email,
                 password:this.password,
                 username:this.username
            });
            this.close();
        }
    }
</script>
<style lang="less">
    .addUser{
         background-color: white;
        .el-dialog{
            margin-top: 0px!important;
            margin-bottom: 0px!important;
        }
        .el-dialog__wrapper{
            position: absolute;
        }
        .dialog-footer{
            display: flex;
            justify-content: center;
        }
        .el-dialog__body{
            padding: 0px 20px;
        }
    }
</style>